// 综合案例

// 时间格式化函数
function formatTime(): string {
  const _data = new Date()
  const h = _data.getHours()
  const m = _data.getMinutes()
  const s = _data.getSeconds()
  return `${h}:${m}:${s}`
}

console.log(formatTime())

type DataItem = {
  count: number
  time: string
}

const KEY = 'ts-key'
// 设置数据到本地存储
function setData(data: DataItem[]) {
  localStorage.setItem(KEY, JSON.stringify(data))
}

// 从本地存储中获取数据
function getData(): DataItem[] {
  // JSON.parse('[]')   =>    []
  return JSON.parse(localStorage.getItem(KEY) || '[]')
}

// 渲染函数
function render(list:DataItem[]) {
  // 1. 把list中每一个对象格式化成字符串
   const strArr = list.map(item => {
    return `刷新次数是:${item.count}, 刷新时间是:${item.time}`
   })
   // 2. 调用innerHTML 渲染字符串到页面
   const app = document.getElementById('app') as HTMLDivElement
   app.innerHTML = strArr.join('<br />')
}

function updateData() {
  // 1. 从本地获取数据
  const list = getData()
  // 2. 拿到最后一条记录
  const lastItem = list[list.length - 1]
  // 3. 基于最后一次的记录 count自增 ,然后把数据添加到列表的尾部
  list.push({
    count: lastItem ? lastItem.count + 1 : 1,
    time: formatTime()
  })
  // 4. 把最新的列表存到本地
  setData(list)
  // 5 渲染
  render(list)
}

updateData()